<template>
	<view class="mask kefu-box" @click="cancel">
		<view class="box bgwhite flex-box ">
			<view @click="call" class="flex d-flex j-centert a-center ">
				<image class="Icon" :src="staticUrl+'/images/jh_up/icon-hotline.png'" mode="aspectFit"></image>
				<view class="d-flex f-column a-center">
					<text class="size28 bold">热线客服</text>
					<text class="size26  m-top4">微信同号</text>
				</view>

			</view>
			<view class="flex d-flex j-centert a-center">
				<view @click="contact" class="flex-box align-center flex-center">
					<image class="Icon" :src="staticUrl+'/images/jh_up/icon-chat.png'" mode="aspectFit"></image>
					<text class="size28 bold">在线客服</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="contact" class="btn-contact" v-if='startUp.service_state != 1'></button>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				staticUrl: this.staticUrl
			}
		},
		computed: {
			...mapState(['vid', 'startUp'])
		},
		methods: {
			cancel() {
				this.$emit('cancelFunc') // 点击遮罩隐藏组件
			},
			contact() {
				if (this.vid) {
					if (this.startUp.service_state == 1) { // 客服系统
						uni.navigateTo({
							url: "/userPage/message/consult"
						})
					} else {
						this.call()
					}
				} else {
					// this.$Toast('请先登录/注册')
					this.$emit('openModal') // 触发授权登录
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.kefu-box {
		overflow-y: auto;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.box {
			padding: 30rpx;
			z-index: 3;
			width: 100%;
			position: fixed;
			width: calc(100% - 60rpx);
			border-radius: 12rpx;
			left: 50%;
			transform: translateX(-50%);

			@keyframes bottom {
				0% {
					bottom: -200rpx;
				}

				100% {
					bottom: calc(130rpx + constant(safe-area-inset-bottom));
					bottom: calc(130rpx + env(safe-area-inset-bottom));
				}
			}

			animation: bottom .2s ease-in-out forwards;

			>view {
				position: relative;

				&:nth-child(2) {
					border-left: 2rpx solid #000;
				}

				.Icon {
					width: 42rpx;
					height: 42rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>